<template>
  <el-dialog
    v-if="visible"
    v-dialogDrag
    modal
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="90%"
  >
    <div slot="title" class="dialog-header">换签履历</div>
    <div class="table-name-content">换签履历</div>
    <wz-table :columns="mcDetails" :use-index="true" :table-data="fileData">
        <template #uploadImageList="{ row }">
            <div style="display: flex;flex-wrap: wrap">
                <div v-for="(item,index) in getImgUrl(row.uploadImageList)" :key="index">
                    <el-image
                        style="width: 50px; height: 50px;margin-right: 5px"
                        :src="item"
                        :preview-src-list="getImgUrl(row.uploadImageList)">
                    </el-image>
                </div>
            </div>
        </template>
    </wz-table>
  </el-dialog>
</template>

<script>
const YARD_SWAP_COLUMNS = [
    {
        label: '物料编码',
        prop: 'categoryCode',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '物料名称',
        prop: 'categoryName',
        elProps: {
            'show-overflow-tooltip': true
        }
    },
    {
        label: '资源资产编码',
        prop: 'resourceAssetCode',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '原标签ID',
        prop: 'oldLabel',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '现标签ID',
        prop: 'newLabel',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签人',
        prop: 'swapUser',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签原因',
        prop: 'reason',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '换签时间',
        prop: 'swapTime',
        elProps: {
            width: '120px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '经纬度',
        prop: 'latitudeAndLongitude',
        elProps: {
            width: '100px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '具体情况说明',
        prop: 'remark',
        elProps: {
            width: '150px',
            'show-overflow-tooltip': true
        }
    },
    {
        label: '照片',
        prop: 'uploadImageList',
        elProps: {
            width: '250px',
        }
    }
]

import wzTable from '../components/cTable.vue'
export default {
    name: 'SwapLableDialog',
    components: { wzTable },
    props: {
        materialRemovalVisible: {
            type: Boolean,
            default: false
        },
        currentRow: {
            type: Object,
            default: () => ({})
        },
           fileData: {
             type: Array,
            default: () => []
           }
    },
    data() {
        return {
            mcDetails: [],
            resourceCoding: [],
            assetsFileData: [],
            visible: false
        }
    },
    computed: {
        query() {
            return this.$route.query
        }
    },
    watch: {
        materialRemovalVisible: {
            handler(value) {
                this.visible = value
            },
            immediate: true
        },
        visible(value) {
            this.$emit('update:materialRemovalVisible', value)
        }
    },
    async mounted() {
        this.mcDetails = JSON.parse(
            JSON.stringify(YARD_SWAP_COLUMNS)
        )
    },
    methods: {
      getImgUrl(array){
        return array.map( (item) => window.location.protocol + "//" + window.location.host + "/pic/pic/openUrl?httpUrl="+ item)
      },
    }
}
</script>
<style lang="scss" scoped>

.mt-10 {
    margin-top: 10px;
}
</style>
